<head>
  <meta charset=UTF-8>
</head>
<body>
<div>
  <div id="java">疯狂Java讲义</div>
  <div id="javaee">轻量级Java EE企业应用实战</div>
  <div id="ajax">疯狂前端开发讲义</div>
  <div id="xml">疯狂XML讲义</div>
  <div id="ejb">经典Java EE企业应用实战</div>
  <div id="android">疯狂Android讲义</div>
</div>
<script type="text/javascript" src="jquery-3.1.1.js">
</script>
<script type="text/javascript">
//获取body>div内的所有内容(包括节点和文本)，实际返回div下的6个子div
$("body>div").contents().css("background-color" , "#ddd");
//获取id为ajax的节点的下一个兄弟节点
$("#ajax").next().css("border" , "2px dotted black");
//获取id为ajax的节点后面且id为android的节点之前的所有兄弟节点
$("#ajax").nextUntil("#android").css("font-size" , "20pt");
//获取id为ajax的节点的上一个兄弟节点
$("#ajax").prev().css("border" , "2px solid black");
//获取id为ajax的节点之前且id为java的节点之后的所有兄弟节点
$("#ajax").prevUntil("#java").height(50);
//获取id为ajax的节点且id为java的兄弟节点
$("#ajax").siblings("#java")
  .append("<b>是ID为ajax的节点的兄弟节点(且其id为java)</b>");
//取出所有div元素的父元素，将会输出body元素和一个div元素
$("div").parent().each(function()
  {
    alert($(this).html());
  }
);
</script>
</body>
